<script>
import outMain from "@/components/outMain.vue";
import elSelect from "@/components/public/elSelect.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { AccreditationDetail } from "@/http/api";
export default {
  components: { outMain, elSelect },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      formData: {},
      fileImg: [],
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    getData() {
      AccreditationDetail({ accreditation_content_id: this.detailId }).then(
        (res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
          }
        }
      );
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>办证详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem desPull desNoLeft">
                  <div class="desName">办证封面</div>
                  <div class="desText">
                    <div class="desImgItem">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="formData.accreditation_cover"
                        fit="cover"
                      />
                    </div>
                  </div>
                </div>
                <div class="desItem desNoLeft">
                  <div class="desName">证件名称</div>
                  <div class="desText">{{ formData.accreditation_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">办证价格</div>
                  <div class="desText">
                    {{ formData.accreditation_money }}元
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">累计销量</div>
                  <div class="desText">
                    {{ formData.accreditation_sales }}单
                  </div>
                </div>
                <div class="desItem desNoLeft">
                  <div class="desName">出证时间</div>
                  <div class="desText">{{ formData.accreditation_czsj }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">适用船员范围</div>
                  <div class="desText">{{ formData.accreditation_sycyfw }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">办理要求</div>
                  <div class="desText">{{ formData.accreditation_blyq }}</div>
                </div>
                <div class="desItem desNoLeft">
                  <div class="desName">所需材料</div>
                  <div class="desText">{{ formData.accreditation_sxcl }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">取证方式</div>
                  <div class="desText">{{ formData.accreditation_qzfs }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="formData.accreditation_banner">
              <div class="desTitle">轮播图</div>
              <div class="desCont">
                <div
                  class="desImgItem"
                  :key="index"
                  v-for="(item, index) in formData.accreditation_banner.split(
                    ','
                  )"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    fit="cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
